<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body class="no-skin">

	<!-- /section:basics/sidebar -->
	<div class="main-content">
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try {
					ace.settings.check('breadcrumbs', 'fixed')
				} catch (e) {
				}
			</script>

			<ul class="breadcrumb">
				<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a>
				</li>

				<li><a href="#">Tables</a></li>
				<li class="active">Simple &amp; Dynamic</li>
			</ul>
			<!-- /.breadcrumb -->

			<!-- #section:basics/content.searchbox -->
			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon"> <input type="text"
						placeholder="Search ..." class="nav-search-input"
						id="nav-search-input" autocomplete="off" /> <i
						class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div>
			<!-- /.nav-search -->

			<!-- /section:basics/content.searchbox -->
		</div>

		<!-- /section:basics/content.breadcrumbs -->
		<div class="page-content">
			<!-- #section:settings.box -->
			<div class="ace-settings-container" id="ace-settings-container">
				<div class="btn btn-app btn-xs btn-warning ace-settings-btn"
					id="ace-settings-btn">
					<i class="ace-icon fa fa-cog bigger-150"></i>
				</div>

				<div class="ace-settings-box clearfix" id="ace-settings-box">
					<div class="pull-left width-50">
						<!-- #section:settings.skins -->
						<div class="ace-settings-item">
							<div class="pull-left">
								<select id="skin-colorpicker" class="hide">
									<option data-skin="no-skin" value="#438EB9">#438EB9</option>
									<option data-skin="skin-1" value="#222A2D">#222A2D</option>
									<option data-skin="skin-2" value="#C6487E">#C6487E</option>
									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Choose Skin</span>
						</div>

						<!-- /section:settings.skins -->

						<!-- #section:settings.navbar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-navbar" /> <label class="lbl"
								for="ace-settings-navbar"> Fixed Navbar</label>
						</div>

						<!-- /section:settings.navbar -->

						<!-- #section:settings.sidebar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-sidebar" /> <label class="lbl"
								for="ace-settings-sidebar"> Fixed Sidebar</label>
						</div>

						<!-- /section:settings.sidebar -->

						<!-- #section:settings.breadcrumbs -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-breadcrumbs" /> <label class="lbl"
								for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
						</div>

						<!-- /section:settings.breadcrumbs -->

						<!-- #section:settings.rtl -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-rtl" /> <label class="lbl"
								for="ace-settings-rtl"> Right To Left (rtl)</label>
						</div>

						<!-- /section:settings.rtl -->

						<!-- #section:settings.container -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-add-container" /> <label class="lbl"
								for="ace-settings-add-container"> Inside <b>.container</b>
							</label>
						</div>

						<!-- /section:settings.container -->
					</div>
					<!-- /.pull-left -->

					<div class="pull-left width-50">
						<!-- #section:basics/sidebar.options -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-hover" /> <label class="lbl"
								for="ace-settings-hover"> Submenu on Hover</label>
						</div>

						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-compact" /> <label class="lbl"
								for="ace-settings-compact"> Compact Sidebar</label>
						</div>

						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2"
								id="ace-settings-highlight" /> <label class="lbl"
								for="ace-settings-highlight"> Alt. Active Item</label>
						</div>

						<!-- /section:basics/sidebar.options -->
					</div>
					<!-- /.pull-left -->
				</div>
				<!-- /.ace-settings-box -->
			</div>
			<!-- /.ace-settings-container -->

			<!-- /section:settings.box -->
			<div class="page-content-area">
				<div class="page-header">
					<h1>
						Tables <small> <i
							class="ace-icon fa fa-angle-double-right"></i> Static &amp;
							Dynamic Tables
						</small>
					</h1>
				</div>
				<!-- /.page-header -->

				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<div class="row">
							<div class="col-xs-12">
								<!-- 增加学生信息 -->
								<a href="addUserJdbc">
									<button id="addStudentBtn" class="btn btn-primary">
										<i class="ace-icon fa fa-plus align-top bigger-125"></i>
										添加学生信息
									</button>
								</a>

								<!-- 批量增加学生信息 -->
								<button id="batchAddStudentBtn" class="btn btn-primary">
									<i class="ace-icon fa fa-plus align-top bigger-125"></i>
									批量增加学生信息
								</button>

								<table id="sample-table-1"
									class="table table-striped table-bordered table-hover">
									<thead>
										<tr>
											<th><a href="addUserJdbc">
													<button class="btn btn-xs btn-success">
														<i class="ace-icon fa fa-check bigger-120"></i>
													</button>
											</a></th>
											<th class="center"><label class="position-relative">
													<input type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></th>
											<th>学号</th>
											<th>姓名</th>
											<th>性别</th>
											<th>联系电话</th>
											<th>电子邮箱</th>
											<th>联系地址</th>
											<th>出生日期</th>
											<th>操作</th>

										</tr>
									</thead>


									<c:forEach items="${userJdbcList }" var="userJdbc">
										<tbody>
											<tr>
												<td></td>
												<td class="center"><label class="position-relative">
														<input type="checkbox" class="ace" /> <span class="lbl"></span>
												</label></td>
												<td>${userJdbc.userId }</td>
												<td>${userJdbc.userName }</td>
												<!--		<td>${userJdbc.gender }</td>  -->
												<td><c:if test="${userJdbc.gender=='0' }">男</c:if> <c:if
														test="${userJdbc.gender=='1' }">女</c:if></td>
												<td>${userJdbc.tel }</td>
												<td>${userJdbc.email }</td>
												<td>${userJdbc.address }</td>
												<td>${userJdbc.birthday }</td>
												<td><a href="editUserJdbc/${userJdbc.userId }">
														<button class="btn btn-xs btn-info">
															<i class="ace-icon fa fa-pencil bigger-120"></i>
														</button>
												</a> &nbsp; <a href="deleUserJdbc/${userJdbc.userId }">
														<button class="btn btn-xs btn-danger">
															<i class="ace-icon fa fa-trash-o bigger-120"></i>
														</button>
												</a>&nbsp; <a title="管理学生科目"
													class="btn btn-primary btn-xs manage-subject-student-btn">
														<i class="ace-icon fa fa-users"></i>
												</a></td>
											</tr>
										</tbody>
									</c:forEach>

								</table>
							</div>
							<!-- /.span -->
						</div>
						<!-- /.row -->

						<div class="hr hr-18 dotted hr-double"></div>


						<!-- <div class="table-responsive"> -->



<!-- 批量添加学生信息-模态框(modal) -->
						<div class="modal fade" id="uploadFileModal" tabindex="-1"
							role="dialog" aria-labelledby="uploadFileModalLabel"
							aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="uploadFileModalLabel">上传</h4>
									</div>
									<div class="modal-body">
										<input id="uploadFile" name="uploadFile" type="file">
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default"
											data-dismiss="modal">关闭</button>
										<button id="subjectStudentSaveBtn" type="button"
											class="btn btn-primary">保存</button>
									</div>
								</div>
							</div>
						</div>						

					
	<!-- 管理科目学生-模态框 -->
						<div class="modal fade" id="studentSubjectModal" tabindex="-1"
							role="dialog" aria-labelledby="subjectStudentModallabel"
							aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="subjectStudentModalLabel">
											管理科目学生：<label id="modalStudentName"></label>
										</h4>
									</div>
									<div class="modal-body">
										<input type="hidden" id="userId" />
										<div id="studentSubjectContent" class="control-group"></div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default"
											data-dismiss="modal">关闭</button>
										<button id="studentSubjectSaveBtn" type="button"
											class="btn btn-primary">保存</button>
									</div>
								</div>
							</div>
						</div>



						<!--[if !IE]> -->
						<script type="text/javascript">
							window.jQuery
									|| document
											.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.min.js'>"
													+ "<"+"/script>");
						</script>

						<!-- <![endif]-->

						<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
						<script type="text/javascript">
							if ('ontouchstart' in document.documentElement)
								document
										.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.mobile.custom.min.js'>"
												+ "<"+"/script>");
						</script>
						<script
							src="${pageContext.request.contextPath }/static/assets/js/bootstrap.min.js"></script>

						<!-- page specific plugin scripts -->
						<script
							src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.min.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.bootstrap.js"></script>

						<!-- ace scripts -->
						<script
							src="${pageContext.request.contextPath }/static/assets/js/ace-elements.min.js"></script>

						<!-- inline scripts related to this page -->
						<script type="text/javascript">
							jQuery(function($) {
								var oTable1 = $('#sample-table-2')
								//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
								.dataTable({
									bAutoWidth : false,
									"aoColumns" : [ {
										"bSortable" : false
									}, null, null, null, null, null, {
										"bSortable" : false
									} ],
									"aaSorting" : [],

								});

								$(document)
										.on(
												'click',
												'th input:checkbox',
												function() {
													var that = this;
													$(this)
															.closest('table')
															.find(
																	'tr > td:first-child input:checkbox')
															.each(
																	function() {
																		this.checked = that.checked;
																		$(this)
																				.closest(
																						'tr')
																				.toggleClass(
																						'selected');
																	});
												});

								$('[data-rel="tooltip"]').tooltip({
									placement : tooltip_placement
								});
								function tooltip_placement(context, source) {
									var $source = $(source);
									var $parent = $source.closest('table')
									var off1 = $parent.offset();
									var w1 = $parent.width();

									var off2 = $source.offset();
									//var w2 = $source.width();

									if (parseInt(off2.left) < parseInt(off1.left)
											+ parseInt(w1 / 2))
										return 'right';
									return 'left';
								}

							})
						</script>

						<!-- the following scripts are used in demo only for onpage help and you don't need them -->
						<link rel="stylesheet"
							href="${pageContext.request.contextPath }/static/assets/css/ace.onpage-help.css" />
						<link rel="stylesheet"
							href="${pageContext.request.contextPath }/static/docs/assets/js/themes/sunburst.css" />

						<script type="text/javascript">
							ace.vars['base'] = '${pageContext.request.contextPath }/static';
						</script>
						<script
							src="${pageContext.request.contextPath }/static/assets/js/ace/elements.onpage-help.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/assets/js/ace/ace.onpage-help.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/rainbow.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/language/generic.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/language/html.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/language/css.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/docs/assets/js/language/javascript.js"></script>
						<script
							src="${pageContext.request.contextPath }/static/lib/ajaxfileupload.js"></script>


		<!-- 弹出批量添加的弹出框 -->
						<script type="text/javascript">
							$(function() {
								$('#uploadFile')
										.ace_file_input(
												{
													style : 'well',
													btn_choose : 'Drop files here or click to choose',
													btn_change : null,
													no_icon : 'ace-icon fa fa-cloud-upload',
													droppable : true,
													thumbnail : 'samll',
													preview_error : function(
															filename,
															error_code) {
													}
												}).on('change', function() {

										});

								$('#batchAddStudentBtn').click(function() {
									$('#uploadFileModal').modal('show');
								});

								$('#subjectStudentSaveBtn')
										.on(
												'click',
												function() {
													$
															.ajaxFileUpload({
																url : '${pageContext.request.contextPath }/uploadFile',
																secureuri : false,
																fileElementId : 'uploadFile',//文件上传控件的id属性

																dataType : 'json',
																complete : function(
																		data) {//只要完成就执行，最后执行
																	//alert("完成ajax");
																},
																success : function(
																		data,
																		status) { //服务器成功响应处理函数
																	if (data.success) {
																		alert('批量插入成功！');
																		window.location
																				.reload();
																	} else {
																		alert(data.messageMap.message);
																	}
																},
																error : function(
																		data,
																		status,
																		e) { //服务器响应失败处理函数
																	alert(e);
																}
															});
												});
							});
						</script>



<!-- 管理科目 学生-->
				<script type="text/javascript">
							//点击管理科目学生按钮时，读取所有科目名称和科目编号
							$('.manage-subject-student-btn')
									.click(
											function() {
												//获取当前选择行的学生
												//var subId=$(this).parents("td").siblings("td").eq(0).test();
												var userId = $(this).parent().siblings().eq(2).text();
												$.ajax({
															type : 'POST',
															url : '${contextPath}/getAllSubject',
															data : {
																userId : userId
															},
															dataType : "json",
															success : function(
																	data) {
																var htmlString = '';
																var selectedSubject = data.selectedSubject;
//																//得到所有这个学生关联的科目
																for (var i = 0; i < data.allSubject.length; i++) {
																	var subject = data.allSubject[i];
																	var checked = '';

																	for (var j = 0; j < selectedSubject.length; j++) {
																		if (selectedSubject[j] == subject.subId) {
																			checked = 'checked="true"';
																		}
																	}
																	htmlString += '<div class="checkbox">';
																	htmlString += '<label>';
																	htmlString += '<input name="studentSubjects" class="ace ace-checkbox-2" type="checkbox" value="'
								+ subject.subId + '"' + checked + '/>';
																	htmlString += '<span class="lbl"> '
																			+ subject.name
																			+ '</span>';
																	htmlString += '</lable>';
																	htmlString += '</div>';
																}
																//把所有科目加入到弹出框subjectStudentModal 里面的内容区，即subjectStudentContent里面
																$(
																		'#studentSubjectContent')
																		.html(
																				htmlString);
																$('#userId')
																		.val(
																				userId);
															}
														});

												$('#modalStudentName').text(
														$(this).parents("td")
																.siblings("td")
																.eq(3).text());
												$('#studentSubjectModal')
														.modal('show');
											});

							
							//修改科目的勾选后，点击保存按钮
							$('#studentSubjectSaveBtn')
									.on(
											'click',
											function() {
												var studentSubjects = [];
												//获取所有当前已经勾选的科目的编号
												for (var i = 0; i < $('input[name="studentSubjects"]:checked').length; i++) {
													studentSubjects[i] = $(
															$('input[name="studentSubjects"]:checked')[i])
															.val();
												}
												$
														.ajax({
															type : 'POST',
															url : '${contextPath}/saveStudentSubjects',
															data : {
																studentSubjects : studentSubjects,//吧所有勾选上的科目编号已数组的形式传到后台
																userId : $('#userId').val()
															},
															dataType : "json",
															success : function(
																	data) {
																//判断成功是否
																//前台代码就这样
																if (data.success) {
																	alert('成功');
																	$(
																			'#studentSubjectModal')
																			.modal(
																					'hide');
																} else {
																	alert('失败');
																}
															}
														});
											});
			</script>			
</body>
</html>
